<template>
  <div :class="`go-preview ${props.scaleType}`">
    <template v-if="showEntity">
      <!-- 实体区域 -->
      <div ref="entityRef" class="go-preview-entity">
        <!-- 满屏背景 -->
        <div class="preview-bg" v-if="props.isFullBackground" :style="previewRefFullStyle"></div>
        <!-- 缩放层 -->
        <div ref="previewRef" class="go-preview-scale">
          <!-- 展示层 -->
          <div :style="previewRefStyle">
            <!-- 渲染层 -->
            <slot></slot>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <!-- 满屏背景 -->
      <div class="preview-bg" v-if="props.isFullBackground" :style="previewRefFullStyle"></div>
      <!-- 缩放层 -->
      <div ref="previewRef" class="go-preview-scale">
        <!-- 展示层 -->
        <div :style="previewRefStyle">
          <!-- 渲染层 -->
          <slot></slot>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import {computed} from 'vue' 
import {useScale} from './hooks/useScale.hook'

const props = defineProps({
  screenWidth: {
    type: Number,
    default: 1920,
  },
  screenHeight: {
    type: Number,
    default: 1080,
  },
  scaleType: {
    type: String,
    default: 'fit', // fit/scrollY/scrollX/full
  },
  isFullBackground: {
    type: Boolean,
    default: false,
  },
  isBackgroundImage: {
    type: Boolean,
    default: false,
  },
  backgroundColor: {
    type: String,
    default: '#000000',
  },
  backgroundImage: {
    type: String,
    default: null,
  }
});


const previewRefFullStyle = computed(() => {
  const computedBackground = props.isBackgroundImage && props.backgroundImage && props.backgroundImage.length > 0
      ? {
        background: `url(${props.backgroundImage}) center center / cover no-repeat !important`
      } : {background: props.backgroundColor}
  return {
    ...computedBackground
  }
})
const previewRefStyle = computed(() => {
  // 背景
  if (!props.isFullBackground) {
    const computedBackground = props.isBackgroundImage && props.backgroundImage && props.backgroundImage.length > 0
        ? {
          background: `url(${props.backgroundImage}) center center / cover no-repeat !important`
        } : {background: props.backgroundColor}
    return {
      position: 'relative' as const,
      overflow: 'hidden',
      width: props.screenWidth ? `${props.screenWidth || 100}px` : '100%',
      height: props.screenHeight ? `${props.screenHeight}px` : '100%',
      ...computedBackground
    }
  } else {
    return {
      position: 'relative' as const,
      overflow: 'hidden',
      width: props.screenWidth ? `${props.screenWidth || 100}px` : '100%',
      height: props.screenHeight ? `${props.screenHeight}px` : '100%',
    }
  }
})

const showEntity = computed(() => {
  const type = props.scaleType
  return (
      type === 'scrollY' || type === 'scrollX'
  )
})

const {entityRef, previewRef} = useScale(props.scaleType, props.screenWidth, props.screenHeight)
</script>
<style lang="scss" scoped>
.go-preview {
  position: relative;
  height: 100vh;
  width: 100vw;

  .preview-bg {
    position: absolute !important;
    height: 100vh !important;
    width: 100vw !important;
  }

  .go-preview-scale {
    transition: all 0.3s;
  }

  &.fit,
  &.full {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .go-preview-scale {
      transform-origin: center center;
    }
  }

  &.scrollY {
    overflow-x: hidden;
    overflow-y: scroll;

    .go-preview-scale {
      transform-origin: left top;
    }
  }

  &.scrollX {
    overflow-x: scroll;
    overflow-y: hidden;

    .go-preview-scale {
      transform-origin: left top;
    }
  }
}
</style>